<template>
    <div class="broker">
        <li>经纪人管理</li>
        <el-card class="box-card">
            <div class="search">
                <div class="informationSearch">
                    <span>搜索:</span>
                    <el-input placeholder="请输入内容" v-model="keyword"></el-input>
                    <el-button type="primary" @click="handleSearch" >搜索</el-button>
                </div>
                <div class="informationType">
                    <span>状态:</span>
                    <el-select v-model="value" clearable placeholder="请选择" @change="changeSelect" >
                        <el-option label="在职" value="在职"></el-option>
                        <el-option label="离职" value="离职"></el-option>
                    </el-select>
                </div>
                <el-button type="primary" @click="addBroker" >添加</el-button>
            </div>
            <el-table
                :data="brokerList"
                stripe
                border >
                <el-table-column type="index" label="序号" width="80" ></el-table-column>
                <el-table-column label="姓名" prop="name" ></el-table-column>
                <el-table-column label="手机号" prop="phone" ></el-table-column>
                <el-table-column label="公司" prop="company" ></el-table-column>
                <el-table-column label="新房" prop="newBuil" ></el-table-column>
                <el-table-column label="二手房" prop="oldBuil" ></el-table-column>
                <el-table-column label="租房" prop="rent" ></el-table-column>
                <el-table-column label="状态" prop="state" ></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editBroker(scope.row)" >编辑</el-button>
                        <el-button type="text" @click="deleteBroker(scope.row)" >删除</el-button>
                        <el-button type="text" >启用</el-button>
                        <el-button type="text" >禁用</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageIndex"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <el-dialog title="" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号" :label-width="formLabelWidth">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="公司" :label-width="formLabelWidth">
                    <el-input v-model="form.company" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新房" :label-width="formLabelWidth">
                    <el-input v-model="form.newBuil" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="二手房" :label-width="formLabelWidth">
                    <el-input v-model="form.oldBuil" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="租房" :label-width="formLabelWidth">
                    <el-input v-model="form.rent" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-input v-model="form.state" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="()=>{
                        dialogFormVisible = false
                        this.form = {
                          name: '',
                          phone: '',
                          company: '',
                          newBuil: '',
                          oldBuil: '',
                          rent: '',
                          state: ''
                        }
                      }">取 消</el-button>
                <el-button type="primary" @click="submin">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
  data () {
    return {
      keyword: '',
      value: '',
      brokerList: [],
      page: {
        pageIndex: 1,
        pageSize: 5
      },
      total: 0,
      form: {
        name: '',
        phone: '',
        company: '',
        newBuil: '',
        oldBuil: '',
        rent: '',
        state: ''
      },
      dialogFormVisible: false,
      formLabelWidth: '80px'
    }
  },
  created () {
    this.getBrokerList()
  },
  methods: {
    handleSizeChange (val) { // 分页
      this.page.pageSize = val
      this.getBrokerList()
    },
    handleCurrentChange (val) {
      this.page.pageIndex = val
      this.getBrokerList()
    },
    getBrokerList () { // 获取数据
      this.$api.getBroker(this.page).then(res => {
        if (res.data.code === 1) {
          this.brokerList = res.data.data
          this.total = res.data.total
        }
      })
    },
    deleteBroker (row) { // 删除
      this.$api.brokerDelete({ id: row.id }).then(res => {
        if (res.data.code === 1) {
          this.$message.success('删除成功')
          this.getBrokerList()
        }
      })
    },
    handleSearch () { // 搜索
      this.$api.brokerSearch({ name: this.keyword }).then(res => {
        if (res.data.code === 1) {
          this.brokerList = res.data.data
        }
      })
    },
    changeSelect () { // 筛选
      this.$api.brokerSelect({ state: this.value }).then(res => {
        if (res.data.code === 1) {
          this.brokerList = res.data.data
        }
      })
    },
    editBroker (row) { // 打开编辑弹框
      this.dialogFormVisible = true
      this.form = row
    },
    addBroker () { // 打开添加弹框
      this.dialogFormVisible = true
    },
    submin () {
      if (this.form.id) {
        this.$api.brokerEdit(this.form).then(res => {
          if (res.data.code === 1) {
            this.form = {
              name: '',
              phone: '',
              company: '',
              newBuil: '',
              oldBuil: '',
              rent: '',
              state: ''
            }
            this.dialogFormVisible = false
            this.getBrokerList()
          }
        })
      } else {
        this.$api.brokerAdd(this.form).then(res => {
          if (res.data.code === 1) {
            this.form = {
              name: '',
              phone: '',
              company: '',
              newBuil: '',
              oldBuil: '',
              rent: '',
              state: ''
            }
            this.dialogFormVisible = false
            this.getBrokerList()
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.broker{
    width: 100%;
    height: 100%;
}
.box-card{
    margin-top: 10px;
}
.search{
    display: flex;
    align-items: center;
    margin: 10px 0;
}
.informationSearch{
    display: flex;
    align-items: center;
    margin-right: 15px;
}
.informationSearch span{
    width: 60px;
}
.informationType{
    margin-right: 20px;
}
.cell .el-button{
    margin: 0 5px;
}
</style>
